<html>
	<head>
		<title>Lab 3 v1</title>
		<style type="text/css">
			#cv { border-width: 1px; border-color: black; border-style: solid; }
		</style>
		<script tyoe="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script tyoe="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js"></script>
		<script type="text/javascript">
		$(function()
		{
			$("#cv").on("click", onClick);
		});

		function onClick(e)
		{
			$("#cv").clearCanvas()
			.drawText
			({
				fillStyle: "#000",
				strokeStyle: "#000",
				strokeWidth: 1,
				x: e.clientX,
				y: e.clientY,
				fontSize: "8pt",
				fontFamily: "Verdana, sans-serif",
				text: e.clientX + "," + e.clientY	
			});
			$("#x").html("Avstand fra den venstre kanten av Canvas er " + e.clientX);
			$("#y").html("Avstand fra den øverste kanten av Canvas er " + e.clientY);
			console.log("(x,y)=(" + e.clientX + "," + e.clientY + ")");
		}
	</script>
</head>
	<body>
		<canvas id="cv" width="800px" height="600px"></canvas>
		<p id="x"></p>
		<p id="y"></p>
	</body>
</html>
